import React, { useState, useContext } from "react";
import {
  StyleSheet,
  Text,
  View,
  Image,
  Platform,
  Dimensions,
  StatusBar,
  TouchableOpacity,
  Modal,
  TouchableWithoutFeedback,
  TextInput,
} from "react-native";
import { AntDesign } from "@expo/vector-icons";
import { useDispatch } from "react-redux";
import { signout } from "../../store/actions";
import { changeState } from "../../store/actions";
import * as ImagePicker from "expo-image-picker";
import companyInfoContext from "../../context/personalDetails/companyInfoContext";
import personMessageContext from "../../context/personalDetails/personMessageContext";

const dimen = Dimensions.get("window");
const width = dimen.width;
const SuppilerUser = ({ navigation }) => {
  const dispatch = useDispatch();
  const { companyInfo } = useContext(companyInfoContext);
  const { personMessage, editMessage } = useContext(personMessageContext);
  const name = personMessage.name;
  const [avatarSource, setAvatarSource] = useState("");
  const [isVisible, setIsVisible] = useState(false);
  const [isEdit, setEdit] = useState(false);
  const [value, onChangeText] = useState(name);

  const pickImage = async () => {
    // No permissions request is necessary for launching the image library
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      // aspect: [1, 1],
      quality: 1,
    });
    if (!result.cancelled) {
      setAvatarSource(result.uri);
      setIsVisible(false);
    }
  };

  const openCamera = async () => {
    const permissionResult = await ImagePicker.requestCameraPermissionsAsync();
    if (permissionResult.granted === false) {
      alert("您拒绝该应用使用您的相机");
      return;
    }
    const result = await ImagePicker.launchCameraAsync({
      allowsEditing: true,
      quality: 1,
      // aspect: [4, 3],
    });
    if (!result.cancelled) {
      setAvatarSource(result.uri);
      setIsVisible(false);
    }
  };

  return (
    <View style={styles.container}>
      <View style={{ flex: 0.2, position: "relative" }}>
        <View style={styles.topview}>
          {/* <TouchableOpacity
            onPress={() => navigation.goBack()}
            style={{
              position: "absolute",
              left: 25,
              top: 20,
            }}
          >
            <AntDesign name="close" size={22} color="white" />
          </TouchableOpacity>
          <TouchableOpacity
            style={{
              position: "absolute",
              right: 25,
              top: 20,
            }}
          >
            <AntDesign name="bars" size={22} color="white" />
          </TouchableOpacity> */}
        </View>
      </View>

      <View
        style={{ flex: 0.75, position: "relative", backgroundColor: "#b8e6e5" }}
      >
        <View style={styles.middleview}>
          <TouchableOpacity
            style={styles.avatar}
            onPress={() => {
              setIsVisible(true);
            }}
          >
            {avatarSource === "" ? (
              <View
                style={[
                  styles.avatarContent,
                  {
                    backgroundColor: "#fcd6d5",
                    justifyContent: "center",
                    alignItems: "center",
                  },
                ]}
              >
                <Text style={{ color: "white", fontSize: 16 }}>选择照片</Text>
              </View>
            ) : (
              <Image
                style={styles.avatarContent}
                source={{ uri: avatarSource }}
              />
            )}
          </TouchableOpacity>
          <View style={styles.messageStyle}>
            <View style={styles.nameStyle}>
              <TextInput
                editable={isEdit}
                style={[
                  styles.nameText,
                  { color: isEdit ? "#666c74" : "#3c4560" },
                ]}
                defaultValue={personMessage.name}
                onChangeText={(text) => onChangeText(text)}
                value={value}
              ></TextInput>
              <TouchableOpacity
                style={{ marginLeft: 5 }}
                onPress={() => {
                  if (isEdit && personMessage.name != value) {
                    editMessage({ name: value });
                  }
                  setEdit(!isEdit);
                }}
              >
                {isEdit ? (
                  <AntDesign name="check" size={19} color="black" />
                ) : (
                  <AntDesign name="edit" size={19} color="black" />
                )}
              </TouchableOpacity>
            </View>
            <Text style={styles.phoneStyle}>{personMessage.email}</Text>
            <Text style={[styles.phoneStyle, { width: 200 }]}>
              {companyInfo.company_name}
            </Text>
          </View>
          <View style={styles.itemList}>
            <TouchableOpacity
              onPress={() => navigation.navigate("CompanyInfo")}
            >
              <View style={styles.itemStyle}>
                <Image
                  style={styles.itemImage}
                  source={require("../../../assets/userMessage/companyMessage.png")}
                ></Image>
                <Text style={styles.itemText}>公司信息</Text>
              </View>
            </TouchableOpacity>

            <TouchableOpacity>
              <View style={styles.itemStyle}>
                <Image
                  style={styles.itemImage}
                  source={require("../../../assets/userMessage/certificate.png")}
                ></Image>
                <Text style={styles.itemText}>证件信息</Text>
              </View>
            </TouchableOpacity>

            {personMessage.role == "admin" ? (
              <TouchableOpacity
                onPress={() => navigation.navigate("ManageSuppiler")}
              >
                <View style={styles.itemStyle}>
                  <Image
                    style={styles.itemImage}
                    source={require("../../../assets/userMessage/suppiler.png")}
                  ></Image>
                  <Text style={styles.itemText}>公司供应商</Text>
                </View>
              </TouchableOpacity>
            ) : null}

            <TouchableOpacity
              onPress={() => navigation.navigate("UpdatePassword")}
            >
              <View style={styles.itemStyle}>
                <Image
                  style={styles.itemImage}
                  source={require("../../../assets/userMessage/password2.png")}
                ></Image>
                <Text style={styles.itemText}>修改密码</Text>
              </View>
            </TouchableOpacity>

            <TouchableOpacity
              onPress={() => {
                dispatch(signout());
              }}
            >
              <View style={styles.itemStyle}>
                <Image
                  style={styles.itemImage}
                  source={require("../../../assets/userMessage/logout.png")}
                ></Image>
                <Text style={styles.itemText}>退出登录</Text>
              </View>
            </TouchableOpacity>

            {/* <TouchableOpacity
              onPress={() => {
                navigation.navigate("NormalUser");
                dispatch(changeState("user"));
              }}
            >
              <View style={styles.itemStyle}>
                <Image
                  style={styles.itemImage}
                  source={require("../../../assets/userMessage/changesupplier.png")}
                ></Image>
                <Text style={styles.itemText}>切换至普通用户</Text>
              </View>
            </TouchableOpacity> */}
          </View>
        </View>
      </View>

      <View
        style={{ flex: 0.2, backgroundColor: "white", position: "relative" }}
      >
        <View style={styles.bottomview} />
      </View>

      <Modal animationType="fade" transparent={true} visible={isVisible}>
        <View style={styles.ModalBackground}></View>
        <TouchableWithoutFeedback
          onPress={() => {
            setIsVisible(false);
          }}
        >
          <View style={styles.ModalTop}></View>
        </TouchableWithoutFeedback>
        <View style={styles.ModalStyle}>
          <TouchableOpacity
            style={styles.modalOption}
            onPress={() => {
              openCamera();
            }}
          >
            <Text style={styles.modalText}>拍摄</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={[styles.modalOption, { borderBottomWidth: 4 }]}
            onPress={() => pickImage()}
          >
            <Text style={styles.modalText}>从相册选择</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.modalOption}
            onPress={() => {
              setIsVisible(false);
            }}
          >
            <Text style={styles.modalText}>取消</Text>
          </TouchableOpacity>
        </View>
      </Modal>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
    height: "100%",
    backgroundColor: "white",
    flex: 1,
  },
  topview: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    borderBottomRightRadius: 75,
    backgroundColor: "#b8e6e5",
  },
  middleview: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    borderTopLeftRadius: 75,
    borderBottomRightRadius: 75,
    backgroundColor: "white",
  },
  bottomview: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    borderTopLeftRadius: 75,
    backgroundColor: "#b8e6e5",
    padding: 20,
    justifyContent: "center",
  },
  avatar: {
    borderRadius: 50,
    width: 100,
    height: 100,
    position: "absolute",
    top: -50,
    left: width / 2 - 50,
  },
  avatarContent: {
    borderRadius: 50,
    width: 100,
    height: 100,
  },
  messageStyle: {
    position: "absolute",
    top: 55,
    left: width / 2 - 100,
    width: 200,
    height: 80,
    alignItems: "center",
    justifyContent: "center",
  },
  nameStyle: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
  },
  nameText: {
    textAlign: "center",
    fontSize: 20,
    fontWeight: "bold",
  },
  phoneStyle: {
    textAlign: "center",
    fontSize: 16,
    fontWeight: "500",
    color: "#b8bece",
  },
  itemList: {
    position: "absolute",
    top: 140,
    left: width / 2 - 150,
    height: 250,
    width: 300,
    flexDirection: "column",
  },
  itemStyle: {
    flexDirection: "row",
    marginLeft: 25,
    marginBottom: 15,
    alignItems: "center",
  },
  itemImage: {
    resizeMode: "contain",
    width: 28,
    height: 28,
  },
  itemText: {
    marginLeft: 15,
    fontSize: 16,
  },
  ModalBackground: {
    backgroundColor: "#727272",
    opacity: 0.3,
    zIndex: 0,
    position: "absolute",
    width: "100%",
    height: "100%",
  },
  ModalStyle: {
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
    backgroundColor: "#ffffff",
    zIndex: 1,
    position: "relative",
  },
  ModalTop: {
    flex: 1,
  },
  modalOption: {
    // backgroundColor: "yellow",
    width: "100%",
    padding: 17,
    borderBottomWidth: 0.5,
    borderBottomColor: "#e6e6e6",
  },
  modalText: {
    alignSelf: "center",
    fontSize: 16,
    color: "#201D1D",
  },
});
export default SuppilerUser;
